<template>
  <div class="product">
    <h3>标题：{{ title }}</h3>
    <p>价格: {{ price }} -- 打包价：{{ price + 1 }}</p>
    <p>描述: {{ desc }}</p>
    <!-- 下面这句话会报错 -->
    <!-- <p><button @click="price -= 1">砍一刀 </button></p> -->
    <p><button @click="$emit('cut', 1)">砍一刀</button></p>
  </div>
</template>

<script>
export default {
  // 子要
  // props: ['title', 'price', 'desc']
  props: {
    title: {
      // 限制title这个属性必须要传，不传就会报错
      required: true
    },
    price: {
      required: true,
      // 限制传递的是数字
      type: Number
    },

    desc: {
      default: '该商品，商家暂未说明'
    }
  }
}
</script>

<style>
.product {
  width: 400px;
  border: 3px solid #000;
  border-radius: 5px;
  margin: 10px;
  padding: 0 20px;
}
</style>
